<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="../../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!doctype html>
<html>
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="${ctx}/css/sapar.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/css/common.css" />
<style>
    [v-cloak] {
        display: none;
    }

</style>
<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
<script type="text/javascript" src="${ctx}/js/sapar.js"></script>
<script type="text/javascript" src="${ctx}/js/WdatePicker.js"></script>
<script type="text/javascript" src="${ctx}/assets/layer/layer.js"></script>
<script type="text/javascript" src="${ctx}/js/kkpager.min.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/css/kkpager_blue.css" />
<title>菜单管理</title>
</head>

<body>
    <div id="saper-container">
        <div id="saper-hd"></div>
        <div id="saper-bd">
            <div class="subfiled clearfix">
                <h2>菜单管理</h2>
            </div>
            <div class="subfiled-content" id="app" v-cloak>
              <div class="query_criteria">
                <h3 style="text-indent:2em">▍筛选条件</h3>
                 <div class="search-box clearfix" style="margin-top:10px;">
                     <div class="kv-item clearfix">
                         <label>目录：</label>
                         <div class="kv-item-content ">
                             <select  onchange="selectByParent">
                                 <option  v-for="parent in parentList" v-bind:value=parent.moduleId>
                                     {{parent.moduleName}}
                                 </option>
                             </select>
                         </div>
                     </div>

                    <div class="kv-item clearfix">
                        <label>菜单名称：</label>
                        <div class="kv-item-content">
                            <input type="text" name="searchTxt" placeholder="菜单名称" value="${searchTxt}" class="search_text" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')">
                        </div>
                    </div>
                    <a href="javascript:;" class="sapar-btn sapar-btn-recom query-btn">查询</a>
                </div>
              </div>
             <div class="user_management" >
               <h3 style="text-indent:2em">▍用户管理列表</h3>
                <div class="table " >
                    <!--表格操作-->
                    <div class="table-operate ue-clear" style="height:58px">
                        <a href="javascript:;" class="add" style="margin-top:15px">添加</a>
						<a href="javascript:;" class="edit" style="margin-top:15px">修改</a>
                        <a href="javascript:;" class="del" style="margin-top:15px">删除</a>
                    </div>
                    <!--表格具体内容-->
                    <div class="table-box" >
                       <!--表格开始-->
                        <table>
                            <thead>
                                <tr>
                                	<th><input type="checkbox" id="checkall" name="checkall"/></th>
                                	<th>菜单编号</th>
                                    <th>菜单名称</th>
                                    <th>菜单类型</th>
                                    <th>菜单路径</th>
                                    <th>所属目录</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody >
                                <tr v-for="url in urlList">
                                    <td><input type="checkbox" name="key" v-bind:value=url.moduleId /></td>
                                    <td>{{url.moduleId}}</td>
                                    <td>{{url.moduleName}}</td>
                                    <!-- 自动和else适配一组 -->
                                    <td v-if=url.moduleType==1>
                                        目录
                                    </td>
                                    <td v-else-if=url.moduleType==2>
                                        菜单
                                    </td>
                                    <td>{{url.moduleUrl}}</td>
                                    <td>{{module[url.moduleParent]}}</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div><!--表格结束-->
             </div>   

            </div>
        </div>
        <div id="saper-ft">
       	 	<div id="kkpager"></div>
        </div>
    </div>
    
</body>

<script type="text/javascript">
	$(function(){
		var totalPage = ${total};
		var pageNo = getParameter('pageIndex');
		if(!pageNo){
			pageNo = 1;
		}
		//生成分页
		//有些参数是可选的，比如lang，若不传有默认值
		kkpager.generPageHtml({
			pno : pageNo,
			//总页码
			total : totalPage,
			//链接前部
			hrefFormer : '${ctx}/url/moduleList',
			//链接尾部
			hrefLatter : '.do',
			getLink : function(n){
				return this.hrefFormer + this.hrefLatter + "?pageIndex="+n+"&searchTxt="+$(".search_text").val();
			}
		});
		$("#checkall").click(function(){
   		    if(this.checked){
   		        $("input[name='key']").attr('checked', true)
   		    }else{
   		        $("input[name='key']").attr('checked', false)
   		    }
	    });
		$(".query-btn").click(function(){
			window.location.href="${ctx}/url/moduleList.do?searchTxt="+$(".search_text").val();
		});
		
		$(".add").click(function(){
			window.location.href="${ctx}/url/moduleEdit.do";
		});
		
		$(".edit").click(function(){
			var chk_value = getSelRecord();
			if(chk_value.length == 1){
				window.location.href="${ctx}/url/moduleEdit.do?id="+chk_value[0];
			}else{
				layer.msg("请选择并只能选择一条数据！");
			}
		});
		$(".del").click(function(){
			var chk_value = getSelRecord();
			if(chk_value.length > 0){
				layer.confirm('你确定要删除么？', function(){
					$.ajax({
			             type: "POST",
			             url:"${ctx}/url/moduleDelete.do?id="+chk_value.join(),
			             error: function(request) {
			            	 	layer.alert("网络故障，请稍后再试!");
			             },
			             success: function(data) {
			 	           	if(data.status=="true"){
				 	           	layer.alert("删除成功", function(){
				 	           		window.location.reload();
			           		    });
			 	           	}else{
			 	           		layer.msg(data.msg);
			 	           	}
			             }
			         });
				});
			}else{
				layer.msg('请选择要删除的数据！');
			}
		});
	});
	
	var vue = new Vue({
        el: "#app",
        data: {
            urlList :[],
            module :[],
            parentList: [],
        },
        created:function(){
            this.selectByParent()
        },
        methods: {
            selectByParent :function () {
                $.ajax({
                    type: "GET",
                    url : "/url/moduleByType",
                    success : function (data) {
                        vue.urlList = data.urlList;
                        vue.module = data.moduleMap;
                        vue.parentList = data.parentList;
                    },
                    error : function () {
                        layer.alert("查询失败")
                    }
                })

                $.get("/url/moduleByType",function(data){
                    vue.urlList = data.urlList;
                    vue.module = data.moduleMap;
                    vue.parentList = data.parentList;
                })
            }
        }
    })


	
	function getSelRecord(){
		var chk_value =[];
		$('input[name="key"]:checked').each(function(){
			chk_value.push($(this).val()); 
		});
		return chk_value;
	}
	
  	function getParameter(name) {
		var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		if (r!=null) return unescape(r[2]); return null;
	}
</script>
</html>